<template>
	<view class="addSpendLayout">
		<view class="nav" style="background: linear-gradient(222.7deg, rgba(255, 179, 130, 1) 0%, rgba(240, 117, 144, 1) 100%);
box-shadow: 0px 4px 16px -4px rgba(253, 171, 132, 1);">
			<view class="backBar">
				<uni-icons type="closeempty" size="24" color="white"></uni-icons>
			</view>
			<view class="title">
				<view class="text">请选择支出类别</view>
				<view class="amount">-¥56.35</view>
			</view>
		</view>
		<view class="form">
			<view class="tab">
				<view class="type active">类别</view>
				<view class="info">详情</view>
			</view>
			<view class="content">
				<view class="type" style="display: none;">
					<view class="item">
						<type-icon class="icon" type="education" :white="false"></type-icon>
						<text>教育</text>
					</view>
					<view class="item">
						<type-icon class="icon" type="home" :white="false"></type-icon>
						<text>居家</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="health" :white="false"></type-icon>
						<text>健康</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="restaurant" :white="false"></type-icon>
						<text>餐饮</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="shopping" :white="false"></type-icon>
						<text>购物</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="sport" :white="false"></type-icon>
						<text>娱乐</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="traffic" :white="false"></type-icon>
						<text>交通</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="travel" :white="false"></type-icon>
						<text>旅游</text>
					</view>
					
					<view class="item">
						<type-icon class="icon" type="other" :white="false"></type-icon>
						<text>其他</text>
					</view>
				</view>
				<view class="info">
					<view class="row">
						<uni-datetime-picker class="date" type="date" :border="false" :clear-icon="false" v-model="single" />
					</view>
					<view class="row">
						<view class="icon pay"></view>
						<view class="text">支出</view>
						<input type="digit" placeholder="输入支出金额">
					</view>
					<view class="row">
						<view class="icon pen"></view>
						<view class="text">内容</view>
						<input type="text" placeholder="输入支出描述" maxlength="30">
					</view>
					<view class="submit">
						<view class="icon">
							<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
						</view>
						<view>新增支出</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	
	import {
		getStatusBarHeight
	} from '@/utils/system.js'

	const single = ref('')
	// 获取今天的日期
	single.value = getNowDate()

	// 获取今天的日期
	function getNowDate() {
		const currentDate = new Date();
		const year = currentDate.getFullYear()
		let month = currentDate.getMonth() + 1 // 月份是从 0 开始计数的，因此要加1
		let day = currentDate.getDate()
		month = month >= 10 ? month : '0' + month
		day = day >= 10 ? day : '0' + day
		return `${year}-${month}-${day}`
	}
</script>

<style lang="scss" scoped>
	.addSpendLayout {
		background: #f9f9ff;
		min-height: 100vh;
		
		.nav {
			position: relative;
			background-color: white;
			min-height: 240rpx;
			padding: 168rpx 40rpx 24rpx 40rpx;
			box-shadow: 0px 8rpx 32rpx #EFF1FF;
			
			.backBar {
				position: absolute;
				height: 32rpx;
				width: 32rpx;
				top: 88rpx;
				left: 40rpx;
			}
			
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 48rpx;
				
				.text {
					color: white;
					font-size: 34rpx;
					letter-spacing: 2rpx;
				}
				
				.amount {
					font-size: 34rpx;
					color: #fff;
				}
			}
		}
		
		.form {
			margin: 32rpx;
			background: #fff;
			border-radius: 10rpx;
			box-shadow: 0rpx 4rpx 16rpx  rgba(239, 245, 255, 1);
			padding: 40rpx 28rpx;
			
			.tab {
				height: 72rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				view {
					height: 72rpx;
					width: 204rpx;
					border-radius: 36rpx;
					border: 2rpx solid rgba(210, 210, 210, 1);
					color: rgba(210, 210, 210, 1);
					text-align: center;
					font-size: 28rpx;
					line-height: 72rpx;
					letter-spacing: 10rpx;
					padding-left: 10rpx;
				}
				
				.active {
					color: #1C1C1C;
					border: 2rpx solid #1C1C1C;
				}
				
				.type {
					margin-right: 20rpx;
				}
			}
			
			.content {
				.type {
					padding: 40rpx 0rpx; 
					display: grid;
					gap: 0rpx;
					grid-template-columns: repeat(3,1fr);
					
					.item {
						height: 170rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						.icon {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}
				
				.info {
					padding-top: 24rpx;
					
					.row:nth-child(n+2) {
						padding-left: 80rpx;
					}
					
					.row {
						height: 92rpx;
						margin-bottom: 28rpx;
						border: 1px solid rgba(216, 216, 216, 1);
						border-radius: 3px;
						position: relative;
						
						.date {
							height: 92rpx;
							
							:deep() {
								.uni-date-editor {
									height: 100%;
								}
								
								.uni-date-editor--x {
									height: 100%;
									
									.uniui-calendar {
										font-size: 64rpx !important;
									}
									
									.uni-date__x-input {
										font-size: 28rpx;
									}
								}
							}
						}
						
						.icon {
							position: absolute;
							left: 10rpx;
							top: 13rpx;
							width: 60rpx;
							height: 60rpx;
						}
						
						.pay {
							background: url('@/static/images/add/pay.png') no-repeat;
							background-size: 100%;
						}
						
						.pen {
							left: 12rpx;
							top: 20rpx;
							background: url('@/static/images/add/pen.png') no-repeat;
							background-size: 80%;
						}
						
						.text {
							color: #1C1C1C;
							font-size: 22rpx;
						}
						
						input {
							height: 60rpx;
						}
					}
					
					.submit {
						margin-top: 40rpx;
						height: 100rpx;
						text-align: center;
						line-height: 100rpx;
						border-radius: 50rpx;
						background: linear-gradient(138.46deg, #7EF192 0%, #2DC897 100%);
						box-shadow: 0px 4px 16px -4px #76ED92;
						color: white;
						letter-spacing: 2rpx;
						font-size: 34rpx;
						position: relative;
						
						.icon {
							padding-top: 2rpx;
							position: absolute;
							left: 18rpx;
							top: 18rpx;
							width: 64rpx;
							height: 64rpx;
							border-radius: 32rpx;
							background: rgba(124, 140, 186, 0.4);
							display: flex;
							justify-content: center;
							align-items: center;
							box-shadow: 0px 0px 24px -4px rgba(124, 140, 186, 0.2);
						}
					}
				}
			}
		}
	}
</style>